<template>
	<div class="container">
		<el-row class="client_btn">
			<el-col :span="12" :offset="11" class="tr">
				<el-button @click="handleDown">
					<i class="el-icon-download"></i>下载采集工具</el-button
				>
				<el-button class="btn" @click="dialogVisibleAdd = true"
					><i class="iconfont">&#xe676;</i>新增采集服务</el-button
				>
			</el-col>
		</el-row>
		<div class="box" v-for="(item, index) in clientData" :key="index">
			<el-row class="title">
				<el-col :span="4">{{ item.server_name }}</el-col>
			</el-row>
			<div class="msg">
				<el-row>
					<el-col :span="8">
						<h3>采集服务信息</h3>
					</el-col>
					<el-col :span="15" class="tr">
						<el-button class="btn" @click="handleUpdate(item)">修改</el-button>
						<el-button class="btn" @click="handleStatus(item)">停用</el-button>
						<el-button class="btn" @click="handleDelete(item)">删除</el-button>
						<el-button class="btn" @click="handleRestart(item)">重启</el-button>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="7">
						创建时间:
						<span>{{ item.create_time }}</span>
					</el-col>
					<el-col :span="6">
						启动时间:
						<span>{{ item.last_running_time }}</span>
					</el-col>
					<el-col :span="6">
						运行标志：
						<span v-if="item.running_flag === true">运行</span>
						<span v-else>停止</span>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="7">
						服务唯一号：
						<span>{{ item.id }}</span>
					</el-col>
					<el-col :span="6">
						IP：
						<span>{{ item.host_ip }}</span>
					</el-col>
					<el-col :span="6">
						主机名：
						<span>{{ item.host_name }}</span>
					</el-col>
					<el-col :span="4" class="tr">
						<span v-if="item.isShow === true" @click="handleClose(item)"
							>收起采集任务</span
						>
						<span v-if="item.isShow === false" @click="handleOpen(item)"
							>展开采集任务</span
						>
					</el-col>
				</el-row>
			</div>
			<div v-if="item.isShow === true">
				<el-row class="add">
					<el-col :span="6" :offset="17">
						<el-button type="primary" @click="handleCreateClient(item)"
							>新增任务</el-button
						>
					</el-col>
				</el-row>
				<el-table :data="tableData" style="width: 100%" :stripe="true">
					<!--	<el-table-column type="expand">
						<template slot-scope="props">
							<h3>展开列表</h3>
						</template>
					</el-table-column>
					-->
					<el-table-column label="序号" type="index"></el-table-column>

					<el-table-column label="操作" width="200px">
						<i class="iconfont bg-edit">&#xe679;</i>
						<i class="iconfont bg-stop">&#xe67a;</i>
						<!-- <i class="iconfont bg-check">&#xe67a;</i> -->
						<i class="iconfont bg-delete">&#xe67d;</i>
					</el-table-column>

					<el-table-column label="任务名称" prop="job_name"></el-table-column>
					<el-table-column
						label="任务状态"
						prop="active_flag"
					></el-table-column>
					<el-table-column label="触发类型" prop="job_type"></el-table-column>
					<el-table-column
						label="上次执行时间"
						prop="last_fire_time"
					></el-table-column>
					<el-table-column
						label="下次执行时间"
						prop="next_fire_time"
					></el-table-column>
					<el-table-column
						label="任务描述"
						prop="job_describle"
					></el-table-column>
					<el-table-column
						label="触发时间"
						prop="create_time"
					></el-table-column>
					<el-table-column
						label="创建人"
						prop="create_user_name"
					></el-table-column>
				</el-table>
			</div>
		</div>
		<!-- 新增采集服务-->
		<el-dialog
			title="新增采集服务"
			:visible.sync="dialogVisibleAdd"
			width="500px"
		>
			<el-form
				ref="addclient"
				:model="serviceData"
				label-width="120px"
				:rules="clientRules"
				:label-position="labelPosition"
				size="medium"
			>
				<el-form-item label="服务名称" prop="server_name">
					<el-input v-model="serviceData.server_name"></el-input>
				</el-form-item>
				<el-form-item label="服务地址" prop="host_ip">
					<el-input v-model="serviceData.host_ip"></el-input>
				</el-form-item>
				<el-form-item label="主机名称" prop="host_name">
					<el-input v-model="serviceData.host_name"></el-input>
				</el-form-item>
				<el-form-item label="运行标志" prop="running_flag">
					<el-radio v-model="serviceData.running_flag" label="true"
						>启用</el-radio
					>
					<el-radio v-model="serviceData.running_flag" label="false"
						>停用</el-radio
					>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleAdd = false">取 消</el-button>
				<el-button type="primary" @click="handleCreate">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import myTable from '@/components/myTable'
import createClient from './createClient.vue'
import { Client_orgcode_clientserver, delete_client_job, get_server_list, Client_clientserver } from 'api/coll-mg'
export default {
	components: {
		myTable,
		createClient
	},
	data () {
		return {
			showTable: true,
			dialogDrawer: false,
			labelPosition: 'left',
			dialogVisibleAdd: false,
			tableData: [],
			serviceData: {
				server_name: null,
				host_ip: null,
				host_name: null,
				running_flag: 'false',
				id: null
			},
			clientData: [],
			clientRules: {
				server_name: [
					{
						required: true,
						message: '此项为必填项',
						trigger: 'change'
					}
				],
				host_ip: [
					{
						required: true,
						message: '此项为必填项',
						trigger: 'change'
					}
				],
				host_name: [
					{
						required: true,
						message: '此项为必填项',
						trigger: 'change'
					}
				],
				running_flag: [
					{
						required: true,
						message: '此项为必填项',
						trigger: 'change'
					}
				],
			}
		}
	},
	mounted () {
		this.getList()
	},
	methods: {
		getList () {
			console.log( '采集服务' );
			Client_orgcode_clientserver().then( res => {
				if ( res.code === 0 ) {
					res.data.map( item => {
						item.isShow = false
					} )
					this.clientData = res.data
				}
			} )
		},
		handleCreateClient ( item ) {
			// this.dialogDrawer = true
			this.$router.push( { path: '/create-client', query: { id: item.id } } )
		},
		handleDown () {
			// 下载采集工具
		},
		handleUpdate ( item ) {
			// 更新
		},
		handleStatus ( item ) {
			// 修改状态
		},
		handleDelete ( item, $index ) {
			// 删除
			this.$confirm( '是否删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			} )
				.then( async () => {
					delete_client_job( { data: item.id } ).then( res => {
						if ( res.code === 0 ) {
							this.clientData.splice( $index, 1 )
						} else {
							this.$message.fail( res.msg )
						}
					} )
						.catch( err => {
							console.error( err )
						} )
				} )
		},
		handleRestart ( item ) {
			// 重启
		},
		handleCreate () {
			// 新增采集服务
			this.$refs[ 'addclient' ].validate( ( valid ) => {
				if ( valid ) {
					console.log( this.serviceData );
					Client_clientserver( this.serviceData ).then( res => {
						if ( res.code === 0 ) {
							this.dialogVisibleAdd = false
							this.getList()
							this.$nextTick( () => {
								this.$refs[ 'addclient' ].resetFields()
							} )
						} else {
							this.$message.fail( res.msg )
						}
					} )
				} else {
					return false;
				}
			} )
		},
		handleClose ( item ) {
			// 收起
			item.isShow = false
		},
		handleOpen ( item ) {
			// 展开
			item.isShow = true
			// 获取列表
			get_server_list( { id: item.id } ).then( res => {
				this.tableData = res.data
			} )
		},
	},
};
</script>

<style scoped lang="less">
.container {
	padding: 0 20px;
	.client_btn {
		padding: 10px 0;
	}
	.title {
		height: 50px;
		line-height: 50px;
		color: #333;
		background-color: #f5f5f5;
		border-bottom: 1px solid #ddd;
		padding-left: 20px;
	}
	.el-input {
		width: 80%;
	}
	.msg {
		padding-top: 20px;
		color: #000;
		border: 1px solid #ddd;
		height: 148px;
		padding-left: 20px;
		.el-row {
			line-height: 45px;
		}
		h3,
		h2 {
			display: inline-block;
		}
	}
	.box {
		border: 1px solid #ddd;
		width: 100%;
		margin-bottom: 30px;
		// padding-left: 20px;

		.add {
			text-align: right;
			margin: 10px 0;
		}
	}
	.aliyun {
		margin-top: 30px;
		border-bottom: 1px solid #ddd;
	}
	.btn {
		color: #fff;
		background: rgba(10, 112, 176, 1);
		border-radius: 4px;
		border: 1px solid rgba(220, 223, 230, 1);
		cursor: pointer;
	}
	.tr span {
		color: #0a70b0;
		cursor: pointer;
	}
}
</style>
